<template>
    <div>
<h1>会员编辑</h1>



<table class="table">
    <tbody>
        <tr>
            <td>id</td>
            <td>
                {{ data.id }}
                <input type="text"  :value="data.id" disabled >
            </td>
        </tr>
        <tr>
            <td>name</td>
            <td>
                <input type="text" v-model="data.name">
            </td>
        </tr>
        <tr>
            <td>password</td>
            <td>
                <input type="text" v-model="data.password">
            </td>
        </tr>
        <tr>
            <td>age</td>
            <td>
               <input type="text" v-model="data.age">
            </td>
        </tr>
        <tr>
            <td>sex</td>
            <td>
                <input type="radio" name="sex" value="1" v-model="data.sex"> 男
                <input type="radio" name="sex" value="2" v-model="data.sex"> 女
            </td>
        </tr>
        <tr>
            <td>birthday</td>
            <td>

             <input type="date" v-model="data.birthday">
            </td>
        </tr>
        <tr>
            <td>start</td>
            <td>
                <input type="radio" name="start" value="true" v-model="data.start"> 出勤
                <input type="radio" name="start" value="false" v-model="data.start"> 请假
            </td>
        </tr>
        <tr>
            <td>img</td>
            <td>
                <select v-model="data.memberLevelId">
                    <option value="0">请选择会员等级</option>
                    <option v-for="d in leveldata" :value="d.id">{{ d.name }}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>hobby</td>
            <td>
                <span v-for="h in hs">
                    <input v-model="selecths" type="checkbox" :value="h" > {{h}}
                </span>
            </td>
        </tr>

        <tr>
            <td colspan="2">
                <input type="button" value="更新" class="btn btn-success" @click="updateinfo">
                <a href="/">返回</a>
            </td>
        </tr>
    </tbody>
</table>



    </div>
</template>

<script setup lang="ts">

import axios from 'axios';
import { ref,onMounted } from 'vue';
import { useRoute,useRouter } from 'vue-router';
import moment from 'moment';

const route = useRoute()
const router = useRouter()


//保存更新
const updateinfo=()=>{
    debugger
    data.value.houbbyCount = selecths.value.length;//选择了几个爱好
    data.value.houbbyString = selecths.value.toString()  //["",""]="1234,1234,1234"
    axios.put("https://localhost:7225/api/Member/UpDate",data.value).then(res=>{
        if(res.data>0){
            alert('更新成功')
            router.push({path:'/'});
        }
        else
        {
            alert('更新失败了。。。。。。')
        }
    })
}


const hs = ref(["登山","游泳","读书","打篮球"])
//保存多个选中的爱好的value
const selecths=ref([])

const data=ref(
    {
  "id": 0,
  "name": "string",
  "password": "string",
  "age": 0,
  "sex": 0,
  "birthday": "2025-04-22T06:36:16.827Z",
  "houbbyCount": 0,
  "houbbyString": "string",
  "start": true,
  "isDelete": true,
  "img": "string",
  "memberLevelId": 0,
  "createData": "2025-04-22T06:36:16.827Z"
}
)



onMounted(()=>{
    getdata()

    getleveldata() //读取所有会员等级信息
})

const getdata=()=>{
    //取会员id
    var mid =  route.query.vid
    //再使用会员id调用API
    axios.get("https://localhost:7225/api/Member/GetMember",{params:{id:mid}}).then(res=>{
        data.value  = res.data;
        data.value.birthday =  moment(data.value.birthday).format("YYYY-MM-DD")

        selecths.value= data.value.houbbyString.split(',');
    })
}

//所有会员等级信息
const leveldata=ref([{
    "id": 0,
    "name": "string"
  }])
//读取所有会员等级信息
const getleveldata=()=>{
    axios.get("https://localhost:7225/api/MemberLevel").then(res=>{
        leveldata.value = res.data;


        
    })
}

</script>

<style scoped>

</style>